<template>
  <ul class="song-list">
        <li class="item"  v-for="value in songs" :key="value.id" @click="selectMusic(value.id)"> 
            <!-- <img :src="value.song.album.picUrl" alt=""> -->
            <!-- 图片懒加载 -->
            <img v-lazy="value.picUrl" alt="">
            <div>
                <h3>{{value.singer}}</h3>
                <p>{{value.name}}</p>
            </div>
        </li>
    </ul>
</template>

<script>
// 从vuex导入 { mapActions } 在methods方法中映射actions方法
import { mapActions } from 'vuex'
export default {
  name: 'SongItem',
  props:{
      songs:{
          type:Array,
          default:[],
          required:true
      }
  },
  methods: {
      ...mapActions([
          'setFullScreent',
          'setMiniPlayer',
          'setSongDetail'
      ]),
      selectMusic(id){
          this.setFullScreent(true)
          this.setMiniPlayer(false)
          this.setSongDetail([id])
      }
  },
}
</script>

<style scoped lang="scss">
@import '../assets/css/variable.scss';
@import '../assets/css/mixin.scss';
.song-list{
        width: 100%;
        // overflow: hidden;
        .item{
            width: 100%;
            height: 200px;
            display: flex;
            // 垂直居中
            align-items: center;
            padding: 0 20px;
            // margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            img{
                width: 150px;
                height: 150px;
                border-radius: 20px;
                margin-right: 20px;
            }
            div{
                width: 70%;
                h3{
                    @include font-size($font_large);
                    @include font-color();
                    @include no-wrap()
                }
                p{
                    @include font-size($font_samll);
                    @include font-color();
                    @include no-wrap();
                    opacity: 0.6;
                    margin-top: 20px;
                }
            }
        }
    }
</style>
